<template>
    <div class="wrapper" id="my" >
        <header>
          特色课
          <van-icon name="search" class="search" @click="search"/>
        </header>
        <Select @sort="sort" @screen="screen" title1='分类' title2="排序" title3="筛选" :option1="this.option1" :option2="option2"></Select>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <ul class="list">
              <li v-for="(item,index) in list" ::key="index" @click="push(item.id)">
                <p class="title">{{item.title}}</p>
                <p class="time">{{new Date(item.start_play_date).toLocaleString()}} | 共{{item.sales_num}}课时</p>
                <div class="content">
                  <img :src="item.teachers_list[0].teacher_avatar"/>
                  <p class="contp">{{item.teachers_list[0].teacher_name}}</p>
                </div>
                <p class="bottom">
                  <span class="span1">123</span>
                  <span class="span2">123</span>
                </p>
              </li>
            </ul>
          </van-list>
        </van-pull-refresh>
        <tabs></tabs>
    </div>
</template>

<script>
import { courseBasis } from "../request/http.js";
import tabs from "../components/tabs";
import Select from "../components/select";
export default {
  components: {
    tabs,
    Select
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      page: 1,
      limit: 5,
      option1: [
        { text: "综合", value: 0 },
        { text: "最新", value: 1 },
        { text: "最热", value: 2 },
        { text: "价格升序", value: 3 },
        { text: "价格降序", value: 4 }
      ],
      option2: [
        { text: "全部", value: 0 },
        { text: "图文", value: 10 },
        { text: "大班课", value: 2 },
        { text: "小班课", value: 3 },
        { text: "音频课", value: 8 },
        { text: "系统课", value: 9 }
      ]
    };
  },
  mounted() {},
  methods: {
    layerList() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        console.log("11", this.page);
        courseBasis({ page: this.page, limit: this.limit }).then(res => {
          console.log(res);
          this.loading = false;
          if (res.data.data.list.length === 0) {
            this.finished = true;
            return;
          } else {
            let arr1 = this.list;
            const arr2 = res.data.data.list;
            arr1 = arr1.concat(arr2);
            this.list = arr1;
            this.page++;
          }
        });
      }, 1000);
    },
    onLoad() {
      console.log("屏幕滚动");
      this.layerList(this.page);
    },
    onRefresh() {
    
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.page=1;
      this.onLoad();
    },
    sort(val) {
      console.log(val);
      courseBasis({ order_by: val }).then(res => {
        console.log(res);
        this.list = res.data.data.list;
      });
    },
    screen(val) {
      console.log(val);
      courseBasis({ course_type: val }).then(res => {
        console.log(res);
        this.list = res.data.data.list;
      });
    },
    search() {
      this.$router.push("/search");
    },
    push(id){
      this.$router.push({
        path:'/courceDetail',
        query:{id:id}
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  margin-bottom: 1.45rem;
  header {
    line-height: 1rem;
    width: 100%;
    height: 1rem;
    font-size: 0.5rem;
    text-align: center;
    box-sizing: border-box;
    padding: 0rem 0.2rem;
    background: #fff;
    border-bottom: 0.001rem solid #ccc;
    .search {
      float: right;
      line-height: 1rem;
    }
  }
  ul {
    list-style: none;
  }
  .list {
    width: 100%;
    box-sizing: border-box;
    padding: 0.3rem;
    li {
      width: 100%;
      height: 5rem;
      background: #fff;
      border-radius: 0.5rem;
      margin-top: 0.5rem;
      box-sizing: border-box;
      padding: 0.4rem;

      .title {
        font-size: 0.4rem;
      }
      .time {
        font-size: 0.3rem;
        margin-top: 0.2rem;
      }
      .content {
        margin-top: 0.3rem;
        line-height: 1.5rem;
        img {
          width: 1.5rem;
          height: 1.5rem;
          float: left;
          border-radius: 50%;
        }
        .contp {
          font-size: 0.4rem;
          float: left;
        }
      }
      .bottom {
        width: 100%;
        margin-top: 2.5rem;
        font-size: 0.37rem;
        span {
          display: inline-block;
        }
        .span2 {
          float: right;
          color: green;
        }
      }
    }
  }
}
</style>